<script setup>
import { ref, defineOptions } from "vue";
import addType from "../json/addType";
defineOptions({
  name: "moduleAdd",
});
let addTypeList = ref([...addType]);
</script>

<template>
  <div class="module-add-wrapper">
    <div class="module-add-content">
      <div class="search-add-box">
        <el-input placeholder="输入查询内容">
          <template #prepend>
            <svg class="icon icon-zidingyi-btn" aria-hidden="true">
              <use xlink:href="#icon-icon-test4"></use>
            </svg>
          </template>
        </el-input>
        <el-button>
          <svg class="icon icon-zidingyi-btn" aria-hidden="true">
            <use xlink:href="#icon-zidingyi1"></use>
          </svg>
        </el-button>
      </div>
      <div class="add-list-content-box">
        <ul class="list-type">
          <el-scrollbar>
            <li v-for="(item, index) in addTypeList" :key="index">
              <span v-if="item.icon"></span>
              <span>{{ item.label }}</span>
            </li>
          </el-scrollbar>
        </ul>

        <div class="list-type-content">
          <el-card shadow="always">
            <div class="card-content-box">
            <div class="card-item-all">
              <div class="item-icon-url"></div>
              <div class="item-title"></div>
              <div class="item-link-icon"></div>
            </div>
            <div class="card-item-desc">描述</div>
            <div class="card-item-btn">
            <el-button>添加</el-button>
            </div>

            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.module-add-wrapper {
  height: 100%;
  .module-add-content {
    height: 100%;

    .search-add-box {
      display: flex;
      padding: 0 30px;
      .el-button {
        margin-left: 20px;
      }
      .icon-zidingyi-btn {
        font-size: 20px;
      }
    }
    .add-list-content-box {
      display: flex;
      margin-top: 20px;
      height: calc(100% - 50px);
      .list-type {
        background-color: #666;
        color: #fff;
        flex-shrink: 0;
        li {
          padding: 20px 20px;
          box-sizing: border-box;

          &:hover {
            color: #4abbf8;
            background-color: #333;
            cursor: pointer;
          }
        }
        .active {
          color: #4abbf8;
        }
      }
      .list-type-content {
        padding: 0 20px;
        box-sizing: border-box;
        flex: 1;
        .el-card {
          width: 100%;
          margin-top: 20px;
          margin-bottom: 20px;
          background-color: #666;
          border-style: none;
          color: #fff;
        }
      }
    }
  }
}
</style>
